<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>商品采购</span>
    </div>
    <div>
      <el-form :rules="rules" ref="form" :model="cai" label-width="80px">
        <el-form-item label="采购商品">
          <el-select v-model="cai.gid" placeholder="请选择">
            <el-option
              v-for="item in goodlist"
              :key="item.id"
              :label="item.gname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购数量">
          <el-input v-model="cai.rnum"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="price">
          <el-input v-model.number="cai.price"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="cai.bei"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="savecai()">提交采购</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
    export default {
        name: "CaiForm",
      data(){
          return{
            cai:{},
            user:{},
            goodlist:[],
            rules: {
              price:[
                { type:'number',min:0, message: '金额限制大于0', trigger: 'blur'}
              ]
            }
          }
      },
      methods:{
        savecai:function(){
          this.$refs['form'].validate((valid) => {
            if (!valid) {
              return
            }
          });
          this.user=JSON.parse(sessionStorage.getItem("user"));
          this.cai.rname=this.user.fullname;
            this.$http.post("/cai/savecai",this.cai).then(
              (res)=>{
                if(res.data.success){
                  this.$message({
                    message:res.data.message,
                    type: 'success',

                  });
                  this.cai={};
                  this.search();
                }else{
                  this.$message.error(res.data.message);
                }
              }
            );
        },
        resetForm:function(){
          this.$refs['form'].resetFields();
        },
        search:function () {
          this.$http.get("/good/goodlist").then(
            (res)=>{
                if(res.data.success){
                  this.goodlist=res.data.result;
                }else{
                  this.$message.error(res.data.message);
                }
            }
          );
        }
      },
      mounted() {
          this.search();
      }
    }
</script>

<style scoped lang="less">
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
